<template>
  <div>
    <el-card>
      <PageTools :show-before="(showBefore = false)">
        <template v-slot:after>
          <el-button
            v-if="checkPerm('adduser')"
            type="primary"
            @click="open()"
          >添加用户</el-button>
        </template>
      </PageTools>
      <!-- 表格部分 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="username" label="用户名" width="120" />
        <el-table-column prop="image" label="头像" width="260">
          <template v-slot="{ row }">
            <img v-imageError="img" :src="row.image" alt="" class="img">
          </template>
        </el-table-column>
        <el-table-column prop="email" label="邮箱" width="220" />
        <el-table-column prop="created_at" label="创建日期" width="260">
          <template v-slot="{ row }">
            {{ row.created_at | formatDate }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button
              v-if="checkPerm('lookuser')"
              type="primary"
              @click="open(row.id, 'preview')"
            >查看</el-button>
            <el-button
              v-if="checkPerm('editRolesUser')"
              type="success"
              @click="openRole(row.id)"
            >角色</el-button>
            <el-button
              v-if="checkPerm('edituser')"
              @click="open(row.id)"
            >编辑</el-button>
            <el-button
              v-if="checkPerm('deluser')"
              type="warning"
              @click="del(row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row
        type="flex"
        justify="center"
        align="middle"
        style="margin-top: 10px"
      >
        <pageSeparate ref="pageSp" @changeStart="changeStart" />
      </el-row>
      <!-- end -->
    </el-card>
    <!-- 新增用户 -->
    <addUserVue ref="dialog" :dialog-visible.sync="dialogVisible" />
    <!-- end -->
    <!-- 分配角色 -->
    <addRole
      ref="addRole"
      :show-role-dialog.sync="showRoleDialog"
      :user-id="userId"
    />
  </div>
</template>

<script>
import { getStaffList, delStaff, getStaffCount } from '@/api/staff'
import img from '@/assets/404_images/404.png'
import addUserVue from './components/addUser.vue'
import addRole from './components/addRole.vue'

export default {
  components: {
    addUserVue,
    addRole
  },
  data() {
    return {
      tableData: [],
      img,
      dialogVisible: false,
      showRoleDialog: false,
      userId: 0,
      limit: 4,
      start: 1,
      permissionList: []
    }
  },
  created() {
    this.getStaffList()
  },

  methods: {
    // 获取用户列表
    async getStaffList() {
      // console.log(this.start, this.limit)
      this.start = (this.start - 1) * this.limit
      const { data } = await getStaffList({
        _limit: this.limit,
        _start: this.start
      })
      this.$refs.pageSp.getStaffCount()
      this.tableData = data
      // console.log(this.tableData)
    },
    // 更新页码
    getCount(start) {
      // console.log(116, this.$refs.pageSp.start);
      this.$refs.pageSp.start = start
      this.$refs.pageSp.getStaffCount()
    },
    // 关闭更新
    closeUpdate(start) {
      this.start = start
      this.getStaffList()
    },
    // // 打开角色弹窗
    // openRole(id) {
    //   this.showRoleDialog = true
    //   this.userId = id
    //   this.$refs.addRole.getRoleById(id)
    // },
    // // 更新start
    // changeStart(arg) {
    //   this.start = arg
    //   this.getStaffList()
    // },
    // // 打开弹窗
    // open(id, type) {
    //   this.$refs.dialog.id = id
    //   this.$refs.dialog.type = type
    //   if (id) {
    //     this.$refs.dialog.backFill()
    //   }
    //   this.dialogVisible = true
    // },
    // // 删除用户
    // del(id) {
    //   this.$confirm('此操作将永久删除用户, 是否继续?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   })
    //   this.tableData = data
    // },
    // 打开角色弹窗
    openRole(id) {
      this.showRoleDialog = true
      this.userId = id
      this.$refs.addRole.getRoleById(id)
    },
    // 更新start
    changeStart(arg) {
      this.start = arg
      this.getStaffList()
    },
    // 打开弹窗
    open(id, type) {
      this.$refs.dialog.id = id
      this.$refs.dialog.type = type
      if (id) {
        this.$refs.dialog.backFill()
      }
      this.dialogVisible = true
    },
    // 删除用户
    del(id) {
      this.$confirm('此操作将永久删除用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await delStaff(id)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // this.$refs.pageSp.getStaffCount();
          this.start = this.start / this.limit + 1
          const { data } = await getStaffCount()
          if (data % 4 === 0 && this.start > 0) {
            this.start = this.start - 1
          }
          this.getStaffList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.img {
  width: 100px;
  height: 100px;
}
</style>
